<template>
  <div class="lyBody" >
    <div class="lyMain">
      <h1>留言反馈</h1>
      <div class="inpText">
        <textarea
          name=""
          cols="30"
          rows="10"
          v-model="value"
          placeholder="请输入你想说的话......"
        ></textarea>
        <div class="btnBox">
          <input type="button" value="发布" @click="submitVoice" />
          <input type="button" value="重置" @click="value = ''" />
        </div>
      </div>
      <div class="outText">
        <ul id="ulList">
          <li
            class="listItem"
            v-for="(voice, index) in voiceList"
            :key="index"
            @click="openReply(voice, index)"
          >
            <div class="userInfo">
              <img :src="voice.userPhoto" />
              <span>用户：{{ voice.username }}</span>
            </div>
            <div class="voiceText">
              {{ voice.content }}
            </div>
            <div class="replyInput" style="display: none">
              <div>回复：{{ voice.username }}</div>
              <textarea
                id="replyInpt"
                cols="30"
                rows="5"
                v-model="replyContent"
              ></textarea>
              <button @click="addReply(voice.id, index)">提交</button>
            </div>
            <div class="replayText" v-if="voice.reply != null">
              回复：{{ voice.reply }}
            </div>
          </li>
        </ul>
      </div>
      <div class="moreDataBtn">
          <button @click="getMorehandel">查看更多</button>
      </div>
    </div>
  </div>
</template>
<script>
import { reqAddData, reqLiuYanBanList, reqYongHuList } from "../../../api";
export default {
  data() {
    return {
      value: "",
      replyContent: "",
      voiceList: [],
      newList:[],
      pageNum: 1,
      pageSize: 3,
      ax: 0,
      totalRows: 0,
      list: [],
      flag: false,
    };
  },
  created() {
    this.getVoiceList('more');
  },
  // computed:{
  //   NumPage(){
  //     let p = this.totalRows % this.pageSize
  //     if(p == 0){
  //       return (this.totalRows - this.ax * this.pageSize) / this.pageSize + 1
  //     }else{
  //       this.totalRows = this.totalRows + (this.pageSize-p)
  //       return (this.totalRows - this.ax * this.pageSize) / this.pageSize + 1
  //     }
  //   }
  // },
  methods: {
    //获取更多
    getMorehandel() {
      // this.pageNum = Math.ceil(this.totalRows / pageSize) - this.ax
      this.ax = this.ax + 1;
      this.getVoiceList('more');
    },
    //获取留言留言
    async getVoiceList(type) {
      //首次发请求获取总数据条数total
      let result = await reqLiuYanBanList({ pageNum: 1, pageSize: 1 });
      if (result.code == 200) {
        this.totalRows = result.data.total;
        //尝试从最后一页开始拿数据
        let res1 = await reqLiuYanBanList({pageNum:Math.ceil(this.totalRows / this.pageSize) - this.ax,pageSize: this.pageSize,});
        if(res1.code ==200){
          res1.data.list.reverse()
          // if(this.voiceList.length != 0){
          //     if(res1.data.total == this.voiceList.length){
          //       return this.$message({ type: "warning", message: "没有更多啦" });
          //     }    
          // }
          let arr
          if(type == 'more'){
             arr = [...this.voiceList,...res1.data.list]
          }else{
            arr = res1.data.list
          }
          arr.forEach(async (item) => {
              let res = await reqYongHuList({
                pageNum: 1,
                pageSize: 1,
                id: item.userId,
              });
              if (res.code == 200) {
                this.$set(item, "userPhoto", res.data.list[0].photo);
              }
          });
          this.voiceList = arr;
        }

      }
    },
    //添加留言
    async submitVoice() {
      let content = this.value;
      let userId = JSON.parse(window.sessionStorage.getItem("user")).id;
      let username = JSON.parse(window.sessionStorage.getItem("user")).name;
      let result = await reqAddData("/msgboard/add", {
        userId,
        username,
        content,
      });
      if (result.code == 200) {
        this.$message({type:'success',message:'留言成功'})
        this.getVoiceList('updateView');
        this.value = "";
      }
    },
    //展开留言框
    openReply(item, index) {
      if (item.reply != null) return;
      let inp = document.querySelectorAll(".replyInput");
      inp.forEach((item) => {
        item.style.display = "none";
      });
      inp[index].style.display = "block";
    },
    //回复留言{
    async addReply(id, index) {
      let inp = document.querySelectorAll(".replyInput");
      console.log(inp);
      let { replyContent: reply } = this;
      let result = await reqAddData("msgboard/reply", {
        id,
        isdel: false,
        reply,
        replyPicture: "",
      });
      console.log(result);
      if (result.code == 200) {
        inp[index].style.display = "none";
        this.replyContent = "";
        this.$message({type:'success',message:'回复成功'})
        this.getVoiceList('updateView');
      }else{
        this.$message.error('回复失败')
      }
    },
  },
};
</script>

<style lang="less" scoped>
.lyBody {
  background-color: #fff;
  .lyMain {
    width: 60%;
    margin: 0px auto;
    padding: 30px 0px;
    h1 {
      color: #111;
      text-align: center;
      margin-bottom: 50px;
      font-size: 30px;
      color: #666;
    }
    .inpText {
      width: 100%;
      background-color: #f3f3f3;
      padding: 30px;
      box-sizing: border-box;
      textarea {
        width: 100%;
        padding: 3px 5px;
        outline: none;
        font-size: 16px;
      }
      .btnBox {
        text-align: center;
        input {
          padding: 10px 30px;
          margin: 20px 20px 0px 0;
        }
      }
    }
    .outText {
      border: 3px solid skyblue;
      border-radius: 7px;
      margin: 20px auto;
      .listItem {
        list-style: none;
        margin: 15px;
        border-bottom: 2.5px solid lightblue;
        .userInfo {
          display: flex;
          align-items: center;
          img {
            border-radius: 50px;
            width: 50px;
            height: 50px;
            margin: 8px;
          }
        }
        .voiceText {
          margin: 0 28px 7px 67px;
          background-color: rgb(45, 102, 162);
          padding: 5px;
          border-radius: 7px;
          color: #fff;
          cursor: pointer;
        }
        .replyInput {
          margin: 0 28px 7px 67px;
          box-sizing: border-box;
          textarea {
            box-sizing: border-box;
            width: 100%;
            padding: 3px;
          }
          button {
            display: block;
            align-self: flex-end;
            padding: 5px 15px;
            border: 2px solid teal;
            background-color: #fff;
            outline: none;
            border-radius: 3px;
            box-sizing: border-box;
          }
          button:hover {
            background-color: teal;
            color: #fff;
          }
        }
        .replayText {
          cursor: pointer;
          margin: 0 28px 7px 67px;
          background-color: rgb(45, 102, 162);
          padding: 5px;
          margin-bottom: 15px;
          border-radius: 7px;
          color: #fff;
        }
      }
      li:last-child {
        border: none;
      }
    }
    .moreDataBtn{
      text-align: center;
      button{
        padding: 5px 10px;
        border: 2px solid cadetblue;
        border-radius: 7px;
        background-color: #fff;
      }
      button:hover{
        background-color: cadetblue;
        color: #fff;
      }
    }
  }
}
</style>